<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Web Application DWitter</title>

 <script src="jquery.js"></script>
 <script src="pure.js"></script>
 <script src="md5.js"></script>
 
    
<link href="default.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1>Dwitter Chat</h1>
<div class="logoEnssat">
	<img src="http://intranet.enssat.fr/logo/img/logoEnssat--20100318.png" width="210" height="85"/>
</div>
<div class="AddMessage">
<table>
<tr><td><label>email</label></td><td><input type="text" name="email"/></td></tr>
<tr><td><label>nom</label></td><td><input type="text" name="nom"/></td></tr>
<tr><td><label>message</label></td><td><textarea name="message" cols="40" rows="2"></textarea></td></tr>
</table>

<input type="submit" onclick="sendPost()" />
</div>

<ul class="messages">
</ul>

<div class="refresh">
	<input type="button" name="toto" value="refresh" onclick="refresh()" />
</div>

<script language="javascript">

    var directive = {
      'li':{
        'post<-allPost':{
          'b':'post.realName',
          'i':'post.content',
          'input[name="ident"]@value+':'post.id',
          '.form@name':function(arg){
        		return "monform"+arg.post.item.id;
          },
		  'img@src+':function(arg){ 
               return 'http://www.gravatar.com/avatar/'+md5($.trim((''+arg.post.item.email).toLowerCase()))+'?s=80';
		  }
         }
      }
    };

 
 var refresh = function () {
	 
	$.getJSON("service/post", function( data ) {
		$('ul.messages').html('<li><form class="form" name="" method="post" action="service/notif/addNotif"><img width="20px" height="20px" src="" /> <b>test</b> <BR /><i>message </i> <input class="ident" name="ident" type="hidden" value=""/> <input type="submit" value="Signaler"/></form></li>');
		$('ul.messages').render(data, directive);
    } );	 
	 
 };
 
 var sendPost = function () {
	 
	 var email = $( 'input[name="email"]' ).val();
	 var nom = $( 'input[name="nom"]' ).val();
	 var message = $( 'textarea[name="message"]' ).val();
	 
	 var sendData = { realName: nom, email: email, content: message };
	 
	 $.ajax({
		type: 'POST',
		contentType: 'application/json',
		url: "service/post",
		dataType: "json",
		data: JSON.stringify(sendData),
		success: function(data, textStatus, jqXHR){
		             refresh();
		}
	 });
	 
	 $( 'input[name="message"]' ).val('');
 };
 
 
 refresh();
	
</script>

<div class="lien_pages">
	<a href="login.html"> connexion </a> <br/> <a href="inscription.html"> inscription </a> <br/><a href="notification.html"> notifications </a>	
</div>

</body>
</html>
